<template>
  <div class="person">
    <div class="wrap">
      <Crumb
        class="Crumb"
        :nav="[{ name: '首页' }, { name: '个人中心' }]"
      ></Crumb>
      <div class="main">
        <aside>
          <div class="userImg">
            <img src="@/assets/img/service.848ec511.png" alt="" />
          </div>
          <div class="userName">
            {{ userInfo.nickName }}<span @click="loginOutFn">[ 退出 ]</span>
          </div>
          <!-- title -->
          <div class="title">
            <img src="../assets/img/transaction.png" alt="交易管理" />
            交易管理
          </div>
          <ul>
            <li
              :class="/\/userinfo/g.test($route.path) ? 'active' : ''"
              @click="$router.push('/user/userinfo')"
            >
              个人中心
            </li>
            <li>我的订单</li>
            <li
              :class="/\/cart/g.test($route.path) ? 'active' : ''"
              @click="$router.push('/user/cart')"
            >
              购物车
            </li>
            <li>消息通知</li>
            <li>积分明细</li>
            <li>积分攻略</li>
          </ul>

          <!--  -->
          <div class="title">
            <img src="../assets/img/transaction.png" alt="个人信息管理" />
            个人信息管理
          </div>
          <ul>
            <li>地址管理</li>
            <li>账号安全</li>
          </ul>
        </aside>

        <article><router-view></router-view></article>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import Crumb from "@/components/Crumb.vue";
import { mapState } from "vuex";

export default {
  data() {
    return {};
  },
  //组件内的路由守卫
  beforeRouteEnter(to, from, next) {
    let token = localStorage.getItem("x-auth-token");
    if (token) {
      next();
    } else {
      store.dispatch("ToastStatus/asyncChangeIsShowToast", {
        msg: "请先登录！",
        type: "warning",
      });
    }
  },
  components: {
    Crumb,
    /* Cart,
    userInfo, */
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo.userInfo,
    }),
  },
  methods: {
    loginOutFn() {
      localStorage.removeItem("x-auth-token");
      setTimeout(() => {
        this.$router.push("/home");
      }, 1500);
    },
  },
};
</script>

<style lang="less" scoped>
.Crumb {
  padding-bottom: 15px;
  border-bottom: 2px solid #e1e1e1;
}
.main {
  display: flex;
  justify-content: space-between;
  background: #fff;
  aside {
    width: 200px;
    height: 740px;
    background: #e7e7e7;
    .userImg {
      width: 100%;
      padding-left: 50px;
      padding-top: 30px;
      box-sizing: border-box;
      img {
        width: 100px;
        height: 100px;
      }
    }
    .userName {
      margin-left: 28px;
      margin-top: 15px;
      span {
        padding-left: 15px;
        color: #2a5df1;
        cursor: pointer;
      }
    }
    .title {
      display: flex;
      justify-content: left;
      margin-left: 18px;
      margin-top: 43px;
      img {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }
    }
    ul {
      margin-left: 18px;
      li {
        font-size: 14px;
        margin-top: 18px;
        cursor: pointer;
        &.active {
          color: #0a328e;
          font-size: 16px;
          border-left: 3px solid #0a328e;
        }
      }
    }
  }
  article {
    flex: 1;
    padding-left: 60px;
    padding-top: 38px;
    box-sizing: border-box;
    background: #fff;
  }
}
</style>